import React from 'react';
import { ScrollView, View, StatusBar, StyleSheet } from 'react-native';
import { pxToDp } from '../../utils/styleUtil'
import Swiper from 'react-native-swiper';
import { Image, Text, Card, Button, Icon } from '@rneui/themed';
const BANNER_LIST = [
    { id: 1, image:'https://images.pexels.com/photos/2464449/pexels-photo-2464449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
    { id: 2, image:'https://images.pexels.com/photos/6416111/pexels-photo-6416111.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
    { id: 3, image:'https://images.pexels.com/photos/6581325/pexels-photo-6581325.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
    { id: 4, image:'https://images.pexels.com/photos/5847588/pexels-photo-5847588.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
    { id: 5, image:'https://images.pexels.com/photos/12499889/pexels-photo-12499889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
];
const users = [
    {
      name: 'brynn',
      avatar: 'https://uifaces.co/our-content/donated/1H_7AxP0.jpg',
    },
    {
      name: 'thot leader',
      avatar:
        'https://images.pexels.com/photos/598745/pexels-photo-598745.jpeg?crop=faces&fit=crop&h=200&w=200&auto=compress&cs=tinysrgb',
    },
    {
      name: 'jsa',
      avatar: 'https://uifaces.co/our-content/donated/bUkmHPKs.jpg',
    },
    {
      name: 'talhaconcepts',
      avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
    },
    {
      name: 'andy vitale',
      avatar: 'https://uifaces.co/our-content/donated/NY9hnAbp.jpg',
    },
    {
      name: 'katy friedson',
      avatar:
        'https://images-na.ssl-images-amazon.com/images/M/MV5BMTgxMTc1MTYzM15BMl5BanBnXkFtZTgwNzI5NjMwOTE@._V1_UY256_CR16,0,172,256_AL_.jpg',
    },
    ];
export default class Home extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            bannerList: [...BANNER_LIST]
        }
    }
    render() {
        return (
            <ScrollView style={styles.container}>
                <StatusBar translucent={true} backgroundColor={'transparent'}></StatusBar>  
                <View style={styles.header}>
                    <Swiper style={styles.swiper} autoplay={true}>
                    {
                        this.state.bannerList.map(item => (
                            <Image  key={item.id} containerStyle={styles.swiper.slide} source={{uri:item.image}}></Image>
                        ))
                    }
                    </Swiper>
                </View>
                <View style={styles.body}>
                    <Text style={styles.body.title}>IP</Text>
                    <Card.Divider />
                    <Card.Image
            style={{ padding: 0 }}
            source={{
              uri:
                'https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg',
            }}
          />
          <Text style={{ marginBottom: 10 }}>
            The idea with React Native Elements is more about component
            structure than actual design.
          </Text>
          <Button
            icon={
              <Icon
                name="code"
                color="#ffffff"
                iconStyle={{ marginRight: 10 }}
              />
            }
            buttonStyle={{
              borderRadius: 0,
              marginLeft: 0,
              marginRight: 0,
              marginBottom: 0,
            }}
            title="VIEW NOW"
          />
                </View>
                <View style={styles.body}>
                    <Text style={styles.body.title}>IP</Text>
                    <Card.Divider />
                    {users.map((u, i) => {
            return (
              <View key={i} style={styles.user}>
                <Image
                  style={styles.image}
                  resizeMode="cover"
                  source={{ uri: u.avatar }}
                />
                <Text style={styles.name}>{u.name}</Text>
              </View>
            );
          })}
                </View>
            </ScrollView>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#ccc',
    },
    header:{
        height:pxToDp(450),
        marginBottom: pxToDp(20),
    },
    swiper:{
        slide:{
            flex:1,
            width:pxToDp(750),
            height:pxToDp(450)
        }
    },
    body: {
        borderRadius: pxToDp(12),
        margin:pxToDp(20),
        flex:1,
        backgroundColor:'#fff',
        padding:pxToDp(20),
        title: {
            fontSize:pxToDp(60),
        }
    },
    user: {
        flexDirection: 'row',
        marginBottom: 6,
      },
      image: {
        width: 30,
        height: 30,
        marginRight: 10,
      },
      name: {
        fontSize: 16,
        marginTop: 5,
      },
})